<script setup>
import { onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElContainer, ElHeader, ElMain, ElMenu, ElMenuItem, ElDivider } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

const store = useStore()
const route = useRoute()
const router = useRouter()

onMounted(() => {
  // 初始化WebSocket连接
  store.dispatch('initWebSocket')
})

const handleMenuSelect = (key) => {
  router.push(key)
}
</script>

<template>
  <ElContainer class="app-container">
    <ElHeader height="60px">
      <div class="header-content">
        <h1 style="margin: 0; line-height: 60px; color: #303133;">微机室签到系统</h1>
        <ElMenu
          mode="horizontal"
          :default-active="route.path"
          @select="handleMenuSelect"
          style="float: right; line-height: 60px; border-bottom: none;"
        >
          <!-- <ElMenuItem index="/">学生签到</ElMenuItem>
          <ElMenuItem index="/teacher">教师控制</ElMenuItem> -->
        </ElMenu>
      </div>
    </ElHeader>
    <ElMain>
      <router-view />
    </ElMain>
  </ElContainer>
</template>

<style scoped>
.app-container {
  height: 100vh;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
</style>
